<template>
    <view class="page-home-index page-activity-list">
		<u-sticky>
			<view class="search-sticky flex-between">
                <view class="mr-2 city"  @click="actionSheet.isShow = true;">
                    <u-icon name="arrow-down-fill" size="16"></u-icon>
                    <text class="ml-1">{{ actionSheet.name }}</text>
                </view>
                <view class="flex-1">
				    <u-search placeholder="请输入关键字" v-model="searchForm.activitiesName" :show-action="false" @search="getList('refresh')"></u-search>
                </view>
			</view>
		</u-sticky>
		<view class="p-4" v-if="longList.list.length == 0">
            <u-empty text="暂无内容" mode="list"></u-empty>
        </view>
		<view class="fly-card" v-else>
                <view class="item" v-for="(item,index) in longList.list" :key="index" @click="proxy.$util.gotoPage('/packageB/activity/detail',{id:item.id})">
                    <view class="thumb">
                        <u-image width="100%" height="300rpx" :src="proxy.$util.getFullImage(item.coverImageUrl)"></u-image>
                    </view>
                    <view class="content">
                        <view class="title font-bold ellipsis-1">{{ item.activitiesName }}</view>
                        <view class="flex-between mt-2 mb-3">
                            <view class="tags">
                                <u-tag class="tag-cyan tag-noborder mr-1" :text="proxy.$util.setName(item.activitiesType, optionData.activitiesType)" />
                                <u-tag v-if="item.isCheckinRequired == '1'" class="tag-red tag-noborder" text="签到" />
                            </view>
                            <view class="grey9" v-if="item.activitiesMethod == '1'"><u-icon name="map"></u-icon>{{proxy.$util.getDistance(item.latitude, item.longitude, location.latitude, location.longitude)}}km</view>
                        </view>
                        <view class="desc">
                            <view>时间：<text class="c-black">{{ dayjs(item.startTime).format('MM/DD HH:mm') }} {{ proxy.$util.getWeekName(dayjs(item.startTime).day()) }}</text></view>
                            <view class="ellipsis-1">地点：<text class="c-black">{{ item.address || '线上'  }}</text></view>
                            <view>报名：<text class="c-black">{{item.registrationsCount}}/{{ item.maxParticipants }}</text></view>
                        </view>
                    </view>
                </view>
            </view>
            <u-action-sheet :list="actionSheet.list" v-model="actionSheet.isShow" @click="selectActionSheet"></u-action-sheet>
    </view>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import {onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { useLonglist } from '@/static/fn/longList';
const initObj = {
	listApi:'/admin/activities/xcxPage',
}
let { searchForm, longList, getList} = useLonglist(initObj);
import { useAppStore } from '@/stores/app';
import { useOptionData } from '@/stores/optionData';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const appStore = useAppStore();
const optionDataStore = useOptionData();
let optionData = reactive({});
let pageParams = reactive({});
let actionSheet = reactive({
    isShow: false,
    name: '全部',
    list: [],
});
let location = reactive({});

const getInitData = async () => {
    location = appStore.currentLocation;
  let activitiesType = await optionDataStore.getDictList('activitie_type');
  optionData.activitiesType = activitiesType;
  let all = [{
    id: null,
    name: '全部',
    text: '全部',
  }];
  actionSheet.list = all.concat(activitiesType);
}
const selectActionSheet = (index) => {
    let obj = actionSheet.list[index];
    actionSheet.name = obj.name;
    searchForm.activityType = obj.id
    getList('refresh');
}
onPullDownRefresh(() => {
	getList('refresh');
	setTimeout( () => {
		uni.stopPullDownRefresh();
	}, 1000);
});
onReachBottom(() =>{
	getList();
});
onLoad(e => {
    pageParams = e;
})
onShow(() => {
	getInitData();
    searchForm.activitiesMethod = pageParams.activitiesMethod;
    searchForm.status = 2;
	getList('refresh');
});

</script>